<template>
    <div>
        <template>
            <el-table
                    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                    style="width: 100%" >
                <el-table-column
                        label="#"
                        prop="num">
                </el-table-column>
                <el-table-column
                        label="标题"
                        prop="tile">
                </el-table-column>
                <el-table-column
                        label="阅读"
                        prop="cont">
                </el-table-column>
                <el-table-column
                        label="评论"
                        prop="took">
                </el-table-column>


                <el-table-column  align="right">
                    <template slot="header" slot-scope="">
                        <el-input
                                v-model="search"
                                size="mini"
                                placeholder="输入关键字搜索"/>
                    </template>
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>

            </el-table>
        </template>
        <el-pagination
                background
                layout="prev, pager, next"
                :total="100"
        style="margin-left: 180px;margin-top: 20px;">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "articleled",
        data() {
            return {
                tableData: [
                    {
                    num: '0',
                    tile: '大虞海棠',
                    cont: '3',
                    took:'2'
                },
                    {
                        num: '1',
                        tile: '大鱼海棠',
                        cont: '3',
                        took:'2'
                    },
                    {
                        num: '2',
                        tile: '狗与狗狗',
                        cont: '3',
                        took:'2'
                    },
                    {
                        num: '3',
                        tile: '奥特曼A',
                        cont: '3',
                        took:'2'
                    }, ],
                search: ''
            }
        },
        methods: {
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            }
        },
    }
</script>

<style scoped>

</style>